<template>
  <div class="check-item">
    <div class="check-baseinfo">
      <div class="baseinfo-item modality-item">
        <span class="tag modality-tag">{{ info.modality }}</span>
      </div>

      <div class="baseinfo-item">
        <div class="info-title">病例号</div>
        <div class="info-content">{{ info.patientUid }}</div>
      </div>

      <div class="baseinfo-item">
        <div class="info-title">拍片日期</div>
        <div class="info-content">{{ info.studyDate }}</div>
      </div>
    </div>
    <div class="image-list">
      <el-image
        v-for="image in info.seriesList"
        :key="image.seriesUid"
        class="image-item cup"
        style="width: 100px; height: 100px"
        :src="info.urlPublic + image.thumbnail"
        @click="handleOpenViewer(info.studyUid)"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue'

import { openViewer } from '@/utils/common/openViewer'

defineProps({
  info: {
    type: Object,
    default: () => {},
  },
})

const handleOpenViewer = (studyUid: string) => {
  openViewer({
    moduleFlags: 1,
    studyUid,
  })
}
</script>

<style lang="scss" scoped>
.check {
  &-item {
    position: relative;
    display: flex;
    padding: 20px 30px 20px 15px;
    margin-bottom: 10px;
    background: var(--background-color-1);
    border-left: 6px solid var(--color-success);
    border-radius: 6px;
  }

  &-baseinfo {
    font-size: 16px;
  }
}

.baseinfo-item {
  & + & {
    margin-top: 10px;
  }

  &.modality-item {
    position: absolute;
    top: 10px;
    right: 10px;

    .modality-tag {
      margin-right: 0;
    }
  }
}

.info {
  &-title {
    font-size: 14px;
  }

  &-content {
    font-weight: 600;
  }
}

.image {
  &-list {
    flex: 1;
    margin-left: 15px;
  }

  &-item {
    margin: 10px 10px 0 0;
  }
}

.modality {
  &-item {
    display: flex;
    justify-content: center;
  }
}

.modality-tag {
  height: auto;
  padding: 5px 0;
  margin-right: 15px;
  font-size: 16px;
  font-weight: 600;
  border-width: 2px;
}
</style>
